<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>婚书模版</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../css/all.min.css" rel="stylesheet">
  <script src="../js/html2canvas.min.js"></script>
  <style type="text/css">
    @font-face{
      font-family: 'MyFont';src: url('../font/MyFont-GB2316.ttf');
    }

    * {
      margin: 0;
      padding: 0;
    }

    img {
      border: 0 none;
      pointer-events: none;
    }

    html, body {
      height: 100%;
      width: 100%;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-text-size-adjust: none;
      overflow-x: hidden;
    }

    body {
      position: relative;
      color: #CD7F32;
    }

    .pho {
      width: 100%;
      min-height: 100%;
      overflow: hidden;
      position: relative;
      padding-right: 80px;
      box-sizing: border-box;
    }

    .export-btn {
      position: fixed;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      background-color: #fff;
      color: black;
      border: none;
      border-radius: 50px;
      padding: 15px;
      font-size:20px;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
      z-index: 1000;
      writing-mode: vertical-rl;
      font-family: '黑体', serif;
    }

    .export-btn:hover {
      background-color: gray;
      transform: translateY(-50%) scale(1.05);
    }

    .export-btn:active {
      transform: translateY(-50%) scale(0.95);
    }

    .loading {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 24px;
      z-index: 2000;
      display: none;
      font-family: 'MyFont', serif;
    }
  </style>
</head>
<body>
<div class="loading">正在生成图片...</div>

<button class="export-btn" title="一键导出长图"><i class="fas fa-download"></i></button>

<div class="pho">
  <div style="position: absolute;left: 50%;top: 50%;transform: translate3d(-50%,-50%,0);background: #86202D url('');width: 100%;padding:50px;border-radius:10px;display: flex;justify-content: center;">
      <div style="writing-mode: vertical-rl;padding:50px 10px 50px 0px;text-align:center;letter-spacing: 5px;">
        <font style="font-family: 'MyFont';font-size:60px;" contenteditable="true">XX年 XX月 XXX</font>
      </div>
      <div style="writing-mode: vertical-rl;padding:50px 10px 50px 0px;text-align:center;letter-spacing: 5px;">
        <font style="font-family: 'MyFont';font-size:60px;" contenteditable="true">张三</font>
      </div>
      <div style="writing-mode: vertical-rl;padding:220px 0px 20px 0px;text-align:left;">
        <font style="font-family: 'MyFont';font-size:60px;">此证</font>
      </div>
      <div style="writing-mode: vertical-rl;padding:50px 100px 50px 0px;text-align:center;letter-spacing: 5px;">
        <font style="font-family: 'MyFont';font-size:60px;" contenteditable="true">李四</font>
      </div>
     <div style="writing-mode: vertical-rl;padding:60px 50px 0px 0px;letter-spacing: 5px;">
        <font style="font-family: 'MyFont';font-size:60px;">好将红叶之盟 载明鸳谱</font>
      </div>
      <div style="writing-mode: vertical-rl;padding:60px 50px 0px 0px;letter-spacing: 5px;">
        <font style="font-family: 'MyFont';font-size:60px;">谨以白头之约 书向鸿笺</font>
      </div>
      <div style="writing-mode: vertical-rl;padding:60px 50px 0px 0px;letter-spacing: 5px;">
          <font style="font-family: 'MyFont';font-size:60px;">卜他年瓜瓞绵绵 尔昌尔炽</font>
      </div>
      <div style="writing-mode: vertical-rl;padding:60px 50px 0px 0px;letter-spacing: 5px;">
        <font style="font-family: 'MyFont';font-size:60px;">看此日桃花灼灼 宜室宜家</font>
      </div>
      <div style="writing-mode: vertical-rl;padding:60px 50px 0px 0px;letter-spacing: 5px;">
        <font style="font-family: 'MyFont';font-size:60px;">良缘永结 匹配同称</font>
    </div>
      <div style="writing-mode: vertical-rl;padding:60px 100px 0px 0px;letter-spacing: 5px;">
        <font style="font-family: 'MyFont';font-size:60px;">两姓联姻 一堂缔约</font>
      </div>
      <div style="writing-mode: vertical-rl;font-family: 'MyFont';font-size:100px;height:100%;text-align:center;letter-spacing: 10px;">
        婚书
      </div>
  </div>
</div>
<script src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  // 导出按钮点击事件
  $('.export-btn').click(function() {
    // 显示加载提示
    $('.loading').show();
    
    // 使用html2canvas将页面转换为canvas
    html2canvas(document.querySelector('.pho'), {
      scale: 2, // 提高缩放比例以获得更高清晰度
      useCORS: true, // 允许跨域图片
      logging: false,
      letterRendering: true // 确保文字渲染正确
    }).then(canvas => {
      // 隐藏加载提示
      $('.loading').hide();
      
      // 将canvas转换为图片链接
      const imgData = canvas.toDataURL('image/png');
      
      // 创建下载链接并触发下载
      const link = document.createElement('a');
      link.download = '婚书.png'; // 下载文件名
      link.href = imgData;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }).catch(error => {
      // 处理错误
      $('.loading').hide();
      alert('导出失败，请重试！');
      console.error('导出错误:', error);
    });
  });
});
</script>
</body>
</html>